
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/common.js"></script>
    <script>
        $(function() {
            login();
        });

        function watch(i) {
            alert(i);
        }

        function login() {
            var sb = getDeviceId();
            $.ajax({
                url: "http://jk.xmll.xyz/jk/jkFl/xq.ashx?id=2&sb=" + sb, // 请求的URL
                type: "POST", // 请求类型，默认为GET
                dataType: "json", // 预期服务器返回的数据类型
                success: function(response) { // 请求成功时的回调函数
                    console.log(response)
                    if (response.code == 1) {
                        // 成功
                        $("#s1").attr('src', response.S1);

                        $("#s2").text(response.S2);
                        $("#s3").text(response.S3);
                        $("#s4").text(response.S4);
                        $("#s5").text(response.S5);

                        $("#s6").text(response.S6);
                        $("#s7").text(response.S7);

                        // 我的资质
                        var wdzzList = "";

                        for (var i = 0; i < response.ZHiZ.length; i++) {
                            wdzzList += "<span onclick='watch(\""+response.ZHiZ[i].S2+"\")'><img class='tb' src='"+response.ZHiZ[i].S1+"'></span>";
                        }
                        $("#wdzz").append(wdzzList);

                        // 添加ul中的li
                        var liStr = "";
                        for (var i = 0; i < response.ZH.length; i++) {
                            if (i == 0 || i == 1) {
                                liStr += "<li>"+response.ZH[i].S1+"&nbsp;<span style='border-radius:5px; background-color: #CA6FBE; color: #F0F0F0;'><a href='./baoming.html?id="+response.S0+"'>&nbsp;"+response.ZH[i].S2+"&nbsp;</a></span></li>";
                            } else {
                                liStr += "<li>"+response.ZH[i].S1+"</li>";
                            }
                        }
                        $("#zh").append(liStr);

                        // 添加ul中的li
                        var liZzStr = "";
                        for (var i = 0; i < response.GS.length; i++) {
                            liZzStr += "<li><div onclick=''><img src='"+response.GS[i].S1+"'><span style='text-align: center;'>"+response.GS[i].S2+"</span></div></li>";
                        }
                        $("#zz").append(liZzStr);


                    } else {
                        // 未登录，跳转登录
                        window.location.href = "./login.html"
                    }
                },
                error: function(xhr, status, error) { // 请求失败时的回调函数
                    console.error(error); // 在控制台打印错误信息
                }
            });

            $.ajax({
                url: "http://jk.xmll.xyz/jk/jkFl/xq.ashx?id=2&sb=" + sb, // 请求的URL
                type: "POST", // 请求类型，默认为GET
                dataType: "json", // 预期服务器返回的数据类型
                success: function(response) { // 请求成功时的回调函数
                    console.log(response)
                    if (response.code == 1) {
                        $("#baoming").attr('href', "./baoming.html?id="+response.S0)
                    } else {
                        // 未登录，跳转登录
                        window.location.href = "./login.html"
                    }
                },
                error: function(xhr, status, error) { // 请求失败时的回调函数
                    console.error(error); // 在控制台打印错误信息
                }
            });
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            position: relative;
        }

        #app {
            height: 100%;
            width: 100%;
            /* max-width: 720px; */
            max-width: 480px;
            /* max-height: 1282px; */
            max-height: 860px;
            background-image: url("./imgs/beij2.png");
            /* background-size: cover; */
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        .top {
            position: absolute;
            width: 88%;
            height: 77px;
            left: 50%;
            top: 4%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-between;
        }

        .item {
            width: 80px;
            height: 80px;
            background-color: #fff;
            border-radius: 10px;
            font-size: 14px;
            color: #333333;
            text-align: center;
        }

        .item img {
            position: relative;
            top: -5%;
            transform: scale(0.5);
        }

        .item .text {
            position: relative;
            bottom: 15%;
        }

        .item2 {
            width: 115px;
            height: 80px;
            background-color: #fff;
            border-radius: 10px;
            font-size: 14px;
            color: #333333;
            text-align: center;
        }

        .item2 img {
            position: relative;
            top: -5%;
            transform: scale(0.5);
        }

        .item2 .text {
            position: relative;
            bottom: 15%;
        }

        .box{
            background-color: #C156B3;
            width: 98%;
            position: absolute;
            top: 130px;
            bottom: 580px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 10px;
            overflow: auto;
        }

        .box1 {
            background-color: #FFFFFF;
            width: 98%;
            position: absolute;
            top: 295px;
            bottom: 445px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 10px;
            overflow: auto;
        }

        .box2 {
            background-color: #FFFFFF;
            width: 98%;
            position: absolute;
            top: 430px;
            bottom: 310px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 10px;
            overflow: auto;
        }

        .box3 {
            background-color: #FFFFFF;
            width: 98%;
            position: absolute;
            top: 565px;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 10px;
            overflow: auto;
        }

        .right span{
            font-size: 14px;
            padding: 4px 8px;
            background-color: #eef3ff;
            margin-right: 8px;
            border-radius: 4px;
            color: #5476dc;
        }

        .left_div {
            float: left;
            width: 30%;
            height: 120px;
            padding: 20px 0px 0px 15px;
        }

        .right_div {
            float: left;
            width: 50%;
            height: 120px;
            padding: 20px 0px 0px 0px;
            font-size: 18px;
            color: white;
        }

        .c {
            color: #848384;
            font-size: 14px;
            margin: 10px 10px;
        }

        .tb {
            margin-left: 25px;
            width: 50px;
        }

        li {
            border-bottom: 1px solid black;
            margin-top: 10px;
            color: #848384;
        }

        ul {
            list-style: none;
        }

        ul.imglist {
            margin: 0 auto;
            width: 380px;
            overflow: hidden;
        }

        ul.imglist li {
            float: left;
            padding: 8px 8px;
            width: 70px;
        }

        ul.imglist li img {
            display: block;
            width: 30px;
            height: 30px;
            margin: auto;
        }

        ul.imglist li span {
            font-size: 10px;
            display: block;
            width: 50px;
            height: 30px;
            line-height: 30px;
        }

        /* img {
            width: 20px;
            height: 20px;
        } */
    </style>
</head>
<body>
<div id="app">
    <div class="top">
        <a href="./xunYuan.html">
            <div class="item">
                <img src="./imgs/tb01.png" alt="">
                <div class="text">寻缘（80*65）</div>
            </div>
        </a>
        <a href="./xiangQin.html">
            <div class="item">
                <img src="./imgs/tb01.png" alt="">
                <div class="text">相亲</div>
            </div>
        </a>
        <a id="baoming">
            <div class="item">
                <img src="./imgs/tb01.png" alt="">
                <div class="text">相亲报名</div>
            </div>
        </a>
        <div class="item">
            <img src="./imgs/tb01.png" alt="">
            <div class="text">下载</div>
        </div>
    </div>

    <div class="box" @scroll="handleScroll">
        <div class="left_div">
            <img id="s1" style="width: 100px; height: 100px;" src="./imgs/1.png"/>
        </div>
        <div class="right_div">
            <div class="c6" id="s2">
                成都缘分
            </div>
            <div class="c5" id="s4">
                34岁 | 165cm
            </div>
            <div class="c5" id="s5">
                四川 成都 成都市
            </div>
            <div class="c5" id="s3">
                0星会员
            </div>
        </div>
    </div>

    <div class="box1" @scroll="handleScroll">
        <div id="s6" style="margin-left: 20px;margin-top: 10px; font-size: 20px;">
            我的资质:
        </div>
        <div id="wdzz" class="c">

        </div>
    </div>

    <div class="box2" @scroll="handleScroll">
        <div id="s7" style="margin-left: 20px;margin-top: 10px; font-size: 20px;">
            更多功能:
        </div>
        <div>
            <ul id="zz" class="imglist">
                <!-- <li>
                    <div>
                        <img src="./imgs/2_01.png" alt="">
                        <span style="text-align: center;">个人信息</span>
                    </div>
                </li> -->
            </ul>
        </div>
    </div>

    <div class="box3" @scroll="handleScroll">
        <ul id="zh" style="width: 85%; margin-left: 8%;"></ul>
    </div>

    <div style="width: 100%;text-align: center; position: absolute;
        bottom: 5px;left: 50%;transform: translateX(-50%);"
         v-html="data['备案']"> </div>

</div>
</body>
</html>
